<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chrome Compatibility Detector</title>
<link href="base_style.css" type="text/css" rel="stylesheet">
<style>
body {
  width: 620px;
}

/* The cannotDetector message. */
#cannotDetect {
  bottom: 0;
  cursor: default;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}
#cannotDetect span {
  color: #900;
  display: inline-block;
  margin-top: 120px;
}
/* - body status related */
#cannotDetect {
  display: none;
}
.disabled #cannotDetect {
  display: block;
}

/**
 * The body has 4 status:
 * - default : initial state
 * - disabled : hide all detection result
 * - base : show base detection result
 * - advanced : show advanced detection result
 */
.default #tabstrip,
.disabled #tabstrip {
  display: none;
}
.base #tabstrip .base,
.advanced #tabstrip .advanced {
  background: #f8f8f8;
  border: #888 solid 1px;
  border-bottom-color: #f8f8f8;
  color: #333;
  width: 90px;
}

/* the tabstrip. */
#tabstrip {
  float: right;
  margin-top: -30px;
  padding-right: 6px;
}
#tabstrip span {
  border: #888 solid 1px;
  cursor: pointer;
  float: left;
  height: 30px;
  line-height: 28px;
  margin: 0 3px;
  text-align: center;
  width: 90px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -webkit-transition: all 100ms ease-in-out;
}
#tabstrip span {
  background: #d9d9d9;
  color: #666;
}
#tabstrip span:hover {
  background: #fff;
  color: #000;
}

/* The main content. */
#content {
  background : #f8f8f8;
  max-height: 500px;
  min-height: 200px;
  overflow-y: auto;
  padding: 10px 5px;
  -webkit-user-select: text;
}

#content > div {
  display: none;
}

/* body status related */
.base #baseDetectionPage,
.advanced #advancedDetectionPage {
  display: block;
}

/* Popup page list item style. */
.commonList > li:nth-child(even) {
  background-color: #F0F0F0;
}
.commonList > li:hover {
  background-color: #FFFFCE;
}

/* Text style used in base detection result list. */
em,
strong {
  font-style: normal;
  font-weight: normal;
}
em {
  color: forestgreen;
}
strong {
  color: crimson;
}

/* The advanced detection page. */
#advancedDetectionPage > div {
  display: none;
}
#advancedDetectionPage #advancedRunning {
  display: block;
}
#errorArea,
#warningArea {
  display: none;
  margin-top: 5px;
}

/* The table in advanced detection page. */
.commonTable {
  border-collapse: collapse;
  margin: 5px 0;
  table-layout: fixed;
  width: 100%;
}
.commonTable td,
.commonTable th {
  border: 1px solid silver;
  padding: 3px 5px;
  -webkit-transition: all 300ms ease-in-out;
}
.commonTable th {
  background: #E0E0E0;
  font-weight: normal;
  text-align: center;
}
.commonTable tr > td:last-child,
.commonTable tr > th:last-child {
  text-align: center;
  width: 70px;
}
.commonTable tr > td:first-child,
.commonTable tr > th:first-child {
  text-align: center;
  width: 30px;
}
.commonTable tr:nth-child(odd) td {
  background-color: #F3F3F3;
}
.commonTable tr:hover > td {
  background-color: #FFFFCE;
}

/* Tips. */
.tips {
  color: #999;
  font-size: 12px;
}
</style>
<script type="text/javascript" src="constants.js"></script>
<script type="text/javascript" src="helper.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body class="default">

<div id="cannotDetect"><span>${popup_cannotDetect}</span></div>

<div id="header">
  <h1>${extensionName}</h1>
  <div id="tabstrip">
    <span class="base">${popup_baseDetection}</span>
    <span class="advanced">${popup_advancedDetection}</span>
  </div>
</div>

<div id="content">

  <div id="baseDetectionPage">
    <ul id="baseDetectionResultList" class="commonList"></ul>
  </div>

  <div id="advancedDetectionPage">
    <div id="advancedRunning">${popup_detecting}</div>
    <div id="noProblemFoundInfo">${popup_noProblem}</div>

    <div id="detectionResult">
      <h2>
        <span id="detectionStatus">${popup_detectionStatus}</span>
        <span id="allProblemsSummary"></span>
      </h2>

      <div id="errorArea">
        <h3 id="errorProblemsSummary"></h3>
        <table id="errorProblems" class="commonTable">
          <tr>
            <th><input id="errorCheckAll" type="checkbox"></th>
            <th>${popup_issueDescription}</th>
            <th>${popup_issueCount}</th>
          </tr>
        </table>
      </div>

      <div id="warningArea">
        <h3 id="warningProblemsSummary"></h3>
        <table id="warningProblems" class="commonTable">
          <tr>
            <th><input id="warningCheckAll" type="checkbox"></th>
            <th>${popup_issueDescription}</th>
            <th>${popup_issueCount}</th>
          </tr>
        </table>
      </div>

      <p class="tips">${popup_checkboxEffectTip}</p>
    </div>
    <!-- end div #detectionResult -->

  </div>
  <!-- end div #advancedDetectionPage -->

</div>
<!-- end div #content -->

</body>
</html>
